<template>
  <div>
    <div class="panel">
      <div class="panel-header">{{ $route.meta.title }}</div>
      <i-form
        ref="form"
        :items="items"
        :model="form"
        :label-width="200"
        class="consummate-form"
        :rules="rules"
      >
        <template slot="address">
          <el-form-item label="选择地区" prop="area">
            <HycAddressCascader ref="area" v-model="form.area" />
          </el-form-item>
        </template>
        <template slot="cooperationUrl">
          <el-form-item label="合作协议" prop="cooperationUrl">
            <hyc-form-upload
              ref="bl_pic1"
              v-model="form.cooperationUrl"
              :upload-data="stationImgData"
            >
            </hyc-form-upload>
          </el-form-item>
        </template>
        <template slot="licenseUrl">
          <el-form-item label="营业执照" prop="licenseUrl">
            <hyc-form-upload
              ref="bl_pic2"
              v-model="form.licenseUrl"
              :upload-data="stationImgData"
            >
            </hyc-form-upload>
          </el-form-item>
        </template>
      </i-form>
    </div>
    <div class="panel-btn-wrapper">
      <el-button type="success" @click="handleSubmit">立即申请</el-button>
      <el-button type="primary" @click="handleGoBack">返回</el-button>
    </div>
  </div>
</template>
<script>
import { completeApply } from '@/api/user'
import HycFormUpload from '@/components/hycFormUpload'
import HycAddressCascader from '@/components/hycAddressCascader'
import { cloneDeep } from 'lodash'

const merchantType = {
  ANOTHER: '其他运营方',
  CMCC: '中国移动',
  CTT: '中国铁通',
}

export default {
  name: 'consummateMchInfo',
  components: { HycFormUpload, HycAddressCascader },
  watch: {
    'form.merchantType': {
      handler(val, oldVal) {
        if (val === oldVal) return

        if (val === 'ANOTHER') {
          this.rules = this.anotherRules
        } else {
          this.rules = this.mobileRules
        }
        this.resetKey += 1

        this.$nextTick(() => {
          if (!this.$refs.form) return
          this.$refs.form.clearValidate()
        })
      },
      immediate: true,
    },
  },
  data() {
    return {
      resetKey: 1,
      rules: {
        area: [
          {
            required: true,
            message: '请选择地区',
          },
          {
            validator: (rules, value, callback) => {
              const hasCity = value.city && value.city !== ''
              const hasDistrict = value.district && value.district !== ''
              if (!hasCity || !hasDistrict) {
                callback(new Error('地址选择必须精确到区级'))
              } else {
                callback()
              }
            },
          },
        ],
        // cooperationUrl: [{ required: true, message: '请上传合作协议' }]
      },
      anotherRules: {
        area: [
          {
            required: true,
            message: '请选择地区',
          },
          {
            validator: (rules, value, callback) => {
              const hasCity = value.city && value.city !== ''
              const hasDistrict = value.district && value.district !== ''
              if (!hasCity || !hasDistrict) {
                callback(new Error('地址选择必须精确到区级'))
              } else {
                callback()
              }
            },
          },
        ],
        cooperationUrl: [{ required: true, message: '请上传合作协议' }],
      },
      mobileRules: {
        area: [
          {
            required: true,
            message: '请选择地区',
          },
          {
            validator: (rules, value, callback) => {
              const hasCity = value.city && value.city !== ''
              const hasDistrict = value.district && value.district !== ''
              if (!hasCity || !hasDistrict) {
                callback(new Error('地址选择必须精确到区级'))
              } else {
                callback()
              }
            },
          },
        ],
        licenseUrl: [{ required: true, message: '请上传营业执照' }],
      },
      stationImgData: { fileType: 'IMAGE' },
      form: {
        merchantType: 'ANOTHER',
      },
      items: [
        {
          label: '商户属性',
          value: 'merchantType',
          type: 'radio',
          required: true,
          options: Object.keys(merchantType).map((item) => {
            return {
              label: item,
              text: merchantType[item],
            }
          }),
        },
        {
          label: '商户级别',
          type: 'select',
          value: 'merchantLevel',
          required: true,
          clearable: true,
          options: [
            {
              label: '省',
              value: 'PROVINCE',
            },
            {
              label: '市',
              value: 'CITY',
            },
            {
              label: '区（县）',
              value: 'DISTRICT',
            },
          ],
          ifRender: () => {
            return this.form.merchantType !== 'ANOTHER'
          },
        },
        {
          slot: 'address',
        },
        {
          slot: 'cooperationUrl',
        },
        {
          slot: 'licenseUrl',
        },
      ],
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return

        this.form.province = this.form.area.province
        this.form.city = this.form.area.city
        this.form.district = this.form.area.district

        let submitParams = cloneDeep(this.form)

        delete submitParams.area

        console.log(this.$store.getters)

        completeApply({
          mobile: this.$store.getters.mobile,
          applyType: 'COMPLETE',
          name: this.$store.getters.userData.name,
          userName: this.$store.getters.userData.userName,
          serviceMobile: this.$store.getters.userData.serviceMobile,
          ...submitParams,
        }).then(() => {
          this.$message({
            showClose: true,
            message: '申请成功',
            type: 'success',
          })

          this.$router.push('/myself/info')
        })
      })
    },
    handleGoBack() {
      this.$router.push('/myself/info')
    },
  },
}
</script>
<style lang="scss" scoped>
.consummate-form {
  padding-right: 200px;
}
</style>
